<template lang="html">
  <div class="header">
    <div class="header-content">
      <img class="logo" src="../../assets/logo.png" alt="记载失败">
      <div class="userhandle">
        <span @click="loginHandle" ref="user">登录</span>|
        <span>注册</span>|
        <span>关于</span>
      </div>
    </div>
    <el-dialog
      title="登录"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-dialog
        width="30%"
        title="帐号或密码错误"
        :visible.sync="innerVisible"
        append-to-body>
      </el-dialog>
      <el-row>
        <el-col :span="10">
          <el-input placeholder="请输入帐号" v-model="username"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="10">
          <el-input placeholder="请输入密码" v-model="passworld"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="loginClickHandle" size="mini">登录</el-button>
        <el-button @click="dialogVisible = false" size="mini">注册</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PageHeader',
  data() {
    return {
      dialogVisible: false,
      innerVisible: false,
      username: '',
      passworld: '',
      userinfo: {
        uname: 'a',
        uworld: '1'
      },
      isLogin: false
    }
  },
  methods: {
    handleClose(done,ss) {
      console.log(done,ss)
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    loginHandle () {
      if (this.isLogin === false) {
        this.dialogVisible = true
      }else {
        this.isLogin = false
        this.dialogVisible = false
        this.$refs.user.innerText = '登录'
        // 将用户名密码置为空
        this.username = ''
        this.passworld = ''
      }
    },
    loginClickHandle () {
      if (this.isLogin === false) {
        if (this.username === this.userinfo.uname && this.passworld === this.userinfo.uworld) {
          this.$refs.user.innerText = '退出'
          this.dialogVisible = false
          this.isLogin = true
        }else {
          this.innerVisible = true
        }
      }else{
        this.isLogin = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .header
    width: 100%
    height: 1.2rem
    min-width: 24rem
    color: rgba(255,255,255,0.75)
    background: #24292E
    margin-bottom: .4rem
    .header-content
      width: 24rem
      margin: 0 auto
      .logo
        float: left
        height: 1rem
        margin-top: .1rem
      .userhandle
        float: right
        line-height: 1.1rem
        span
          padding: .2rem
          vertical-align: middle
</style>
